import React from 'react'
import {observer} from 'mobx-react';
import {toJS} from 'mobx';
import { WeaPopoverHrm,WeaLocaleProvider } from 'ecCom';
import base from '../../util/base';
const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class Panel extends React.Component {
  
  componentDidMount() {
   this.setPanelPosition();
  }
  componentDidUpdate() {
    this.setPanelPosition();
  }

  //设置操作者信息面板的相对位置
  setPanelPosition() {
    const { clickposX, clickposY } = this.props;
    
    let panel = document.getElementById('wfFrontOperator-container');
    let wrapBox = document.getElementById('container');
    let wrapBoxWidth = wrapBox.offsetWidth;
    let wrapBoxHeight = wrapBox.offsetHeight;
    let objWidth = panel.offsetWidth;
    let objHeight = panel.offsetHeight;
    //操作者面板边缘防撞
    
    if(clickposX + objWidth > wrapBoxWidth) {
      panel.style.left = wrapBoxWidth - objWidth - 5 + 'px';
    } else {
      panel.style.left = clickposX  + 'px';
    }
  
    if (clickposY + objHeight > wrapBoxHeight) {
      panel.style.top = wrapBoxHeight - objHeight - 20 + 'px';
    } else {
      panel.style.top = clickposY  + 'px';
    }
  }

  //拼接a标签的href地址
  createUrl(obj, type='') {
    const { store, info, isGroup,isFromMobile } = this.props;
    const {workflowid} = base.globalStore.commonParam;
    let str = ''
    let targetUrl = `/spa/workflow/static4engine/engine.html#/main/workflowengine/path/pathSet/group?workflowId=${workflowid}&nodeid=${info.nodeid}&nodetype=${info.nodeType}&groupid=`;
    if(isFromMobile) {
      return 'javascript:void(0)'
    }
    if(type == 'notOperate' && isGroup) {
      let groupId = parseInt(info.nodeOperatorName.split('#')[2].replace('_', ''));
      str += (targetUrl+=groupId);
    } else if(obj.type && obj.type !== 0 && !(type == 'notOperate' && info.nodeType == 2)) { //客户？
      str = `/spa/crm/static/index.html#/main/crm/customerView?customerId=${info.nodeOperatorGropId}`;
    } else {
      str += `javaScript:openhrm(${obj.id});` 
    } 
    return str;
  }

  //a标签打开链接跳转的方式
  openFunc(obj,type) {
    const { info } = this.props;
    if(type == 'notOperate' && info.nodeType == 2) {
      str = '_blank';
    }
  }

  
  render () {
    const { store, setoperator, info, isForOperator=false, isForLineInfo=false, isGroup } = this.props;
    const { lineInfo, operatorInfo } = store;
    return (
      <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@b0pqsu`}>
        <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@8rnkvx`}>
        <div className='wfFrontOperator-header'>{getLabel('99', '操作者')}</div>
          {
           isForOperator  && operatorInfo.length!==0 && !isGroup && 
           <div id='wfFrontOperator-main'>
              {
                info.nodeType !== 3 && operatorInfo[0].notOperators.length !== 0 && 
                <div className='operatorItem'>
                  <div className='notOperate'>{getLabel('28500', '未操作')}</div>
                  {
                    operatorInfo[0].notOperators.map( item => {
                      return <a href={this.createUrl(item, 'notOperate')} 
                                target={this.openFunc(item, 'notOperate')}
                                onClick={e => window.pointerXY(e)}>{item.name}</a>
                    })
                  }
                </div>
              }
              { info.nodeType !== 3 && operatorInfo[0].viewers.length !== 0 &&  
                <div className='operatorItem'>
                  <div className={'checked'}>{getLabel('18006', '已查看')}</div>
                  {
                    operatorInfo[0].viewers.map( item => {
                      return <a href={this.createUrl(item)}
                      onClick={e => window.pointerXY(e)}>{item.name}</a>
                    })
                  }
                </div>
              }
              {operatorInfo[0].operators.length !== 0 && 
                <div className='operatorItem'>
                  { (info.nodeType !== 3)  && <div className={'operated'}>{getLabel(28499, '已操作')}</div>}
                  {
                    operatorInfo[0].operators.map( item => {
                      if(item.hasAgent) {
                        return [<a href={this.createUrl(item)}
                          onClick={e => window.pointerXY(e)}>{item.name}</a>
                          ,'->',
                          <a href={this.createUrl(item.agent)}
                          onClick={e => window.pointerXY(e)}>{item.agent.name}</a>]
                        } else {
                          return <a href={this.createUrl(item)}
                          onClick={e => window.pointerXY(e)}> { item.name }</a>
                        }
                    })
                  }
                </div>
              }
            </div>
          }
          {
            isForOperator && operatorInfo.length == 0 && isGroup && 
            <div id='wfFrontOperator-main'>
              {
                <div className='operatorItem'>
                  <a href={this.createUrl({}, 'notOperate')} target='_blank'>{setoperator(info.nodeOperatorName)}</a>
                </div>
              }
              </div>
          }
          {
            isForOperator && operatorInfo.length ==0  && !isGroup &&  info.nodeType != 2 && 
              <div id='wfFrontOperator-main'>
              {
                <div className='operatorItem'>
                  <p>{getLabel('81558','正在加载数据，请稍后')}</p>
                </div>
              }
              </div>
          }
          {/* 线条的出口条件显示 */}
          {/* { 
            isForLineInfo && <div id='info-content'>{lineInfo}</div>
          } */}
        </WeaPopoverHrm>
      </React.Fragment>
    )
  }

}
